<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ringo WebSocket Demo</title>
</head>

<body>
    <h1>Ringo WebSocket Demo</h1>

    <p>Try viewing this page in multiple browser windows!</p>

    <div>
    <form onsubmit="return sendMessage()">
        <input name="message" size="40" placeholder="Type message and hit <Enter>">
    </form>
    </div>
</body>

<script type="text/javascript">
    if (typeof WebSocket !== "function" && typeof MozWebSocket === "function") {
        WebSocket = MozWebSocket;
    }
    if (typeof WebSocket === "function") {
        // Build websocket URL from current location
        var url = location.href.replace(/^[^:]+/, "ws");

        var socket = new WebSocket(url + "websocket");
        socket.onopen = function(evt){
            append("[Connection opened]");
        };
        socket.onmessage = function(evt) {
            append(evt.data);
        };
        socket.onclose = function(evt) {
            append("[Connection closed]");
        };
    } else {
        append("Sorry, your browser does not seem to support WebSockets.");
    }

    function sendMessage() {
        if (socket) {
            var form = document.forms[0];
            socket.send(form.message.value);
            form.reset();
        }
        return false;
    }

    function append(text) {
        var p = document.createElement("p");
        p.appendChild(document.createTextNode(text));
        document.body.appendChild(p);
    }
</script>

</html>